"use client"

import useDeepStore from '@/store/useDeepStore'

const DeepCounter = () => {
  const count = useDeepStore((state) => state.deep.nested.obj.count)

  const increment = useDeepStore((state) => state.incrementDeepCount)
  const decrement = useDeepStore((state) => state.decrementDeepCount)
  const setCount = useDeepStore((state) => state.setDeepCount)


  return (
    <div className="flex flex-col items-center gap-4 p-4">
      <h2 className="text-2xl font-bold">深层状态计数器: {count}</h2>
      
      <div className="flex gap-2">
        <button
          onClick={increment}
          className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
        >
          增加
        </button>
        
        <button
          onClick={decrement}
          className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
        >
          减少
        </button>
        
        <button
          onClick={() => setCount(0)}
          className="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600"
        >
          重置
        </button>
      </div>
    </div>
  )
}

export default DeepCounter 